<template>
  <div class="wrap">
    <van-field
      v-model="curValue"
      :name="config.code"
      :label="config.aliasName"
      :placeholder="`请选择${config.aliasName}`"
      :disabled="config.disabled"
      readonly
      @click="handlerShowPicker"
      :rules="[
        {
          required: config.isMust,
          trigger: 'onChange',
          message: `请正确的选择${config.aliasName}`,
        },
      ]"
    />

    <van-popup
      v-model="showDatePicker"
      round
      position="bottom"
    >
      <van-datetime-picker
        v-model="dateValue"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="dateConfirm"
        @cancel="showDatePicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { DatetimePicker, Popup, Field } from "vant";
import moment from "moment";

export default {
  name: "FormDatePicker",
  components: {
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
    [Field.name]: Field,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    config: {
      type: Object,
      default: {},
    },
  },
  watch: {
    value: {
      handler(val) {
        this.curValue = val;
      },
      immediate: true,
    },
    curValue(val) {
      this.$emit("input", val);
    },
  },
  data() {
    return {
      curValue: undefined,
      showDatePicker: false,
      showEndTimePicker: false,
      dateValue: new Date(),
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2100, 0, 1),
    };
  },
  methods: {
    handlerShowPicker() {
      if (!this.config.disabled) {            // 禁用不允许选择
        this.showDatePicker = true;
      }
    },
    dateConfirm(val) {
      this.curValue = moment(this.dateValue).format("YYYY-MM-DD");
      this.showDatePicker = false;
    },
  },
};
</script>

<style>
</style>